<template>
  <!-- :draggable="route.meta.loopType ? true : false"   
    :resizable="route.meta.loopType ? true : false" -->
  <Vue3DraggableResizable
    v-if="store.draggableShowcaseShow"
    :draggable="getdraggableDisabled(route.meta.loopType, true)"
    :resizable="getdraggableDisabled(route.meta.loopType, true)"
    @mousedown="preventDefaultDrag"
    :disabledX="true"
    :disabledW="true"
    :w="getDraggableNumber(props.width)"
    :h="getExhibitsHeightRest(props.info.showcaseHeight)"
    :x="getDraggableNumber(props.info.showcaseX)"
    :y="getExhibitsHeightRest(props.info.showcaseY)"
    classNameDragging="draggingChild"
    @drag-start="store.setHistoryListItem()"
    @resize-start="store.setHistoryListItem()"
    @resizing="resizing"
    @resize-end="resizeEnd"
    @dragging="dragging"
    :parent="true"
  >
    <!-- border-hover-style -->
    <div class="exhibits-img" :style="{ width: props.width + 'rem', height: props.info.showcaseHeight - 0.1 + 'rem' }">
      <component :list="props.info.showpieceList" :is="getShowcaseItem"></component>
    </div>
  </Vue3DraggableResizable>
  <!-- https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/435275535786053.webp -->
</template>

<script setup lang="ts">
import style1 from './style/style1.vue';
import style2 from './style/style2.vue';
import style3 from './style/style3.vue';
import style4 from './style/style4.vue';
import style5 from './style/style5.vue';
import free2Style1 from './style2/style1.vue';
import free2Style2 from './style2/style2.vue';
import free2Style3 from './style2/style3.vue';
import free4Style1 from './style4/style1.vue';
import free4Style2 from './style4/style2.vue';
import free4Style3 from './style4/style3.vue';
import free4Style4 from './style4/style4.vue';
import free4Style5 from './style4/style5.vue';
import free3style1 from './style3/style1.vue';
import free3style2 from './style3/style2.vue';
import free3style3 from './style3/style3.vue';
import free3style4 from './style3/style4.vue';
import free3style5 from './style3/style5.vue';
import free3style6 from './style3/style6.vue';
import free5style1 from './style5/style1.vue';
import free5style2 from './style5/style2.vue';
import free5style3 from './style5/style3.vue';
import free5style4 from './style5/style4.vue';
import free6style1 from './style6/style1.vue';
import free6style2 from './style6/style2.vue';
import free6Style3 from './style6/style3.vue';
import free6Style4 from './style6/style4.vue';
import free7style1 from './style7/style1.vue';
import free7style2 from './style7/style2.vue';
import free8Style1 from './style8/style1.vue';
import free8Style2 from './style8/style2.vue';
import free8Style3 from './style8/style3.vue';
import free8Style4 from './style8/style4.vue';
import free9Style1 from './style9/style1.vue';
import free9Style2 from './style9/style2.vue';
import free11Style1 from './style11/style1.vue';
import free11Style2 from './style11/style2.vue';
import free11Style3 from './style11/style3.vue';
import free10Style1 from './style10/style1.vue';
import free10Style2 from './style10/style2.vue';
import free10Style3 from './style10/style3.vue';
import free12Style1 from './style12/style1.vue';
import free12Style2 from './style12/style2.vue';
import free13Style1 from './style13/style1.vue';
import free13Style2 from './style13/style2.vue';
import free13Style3 from './style13/style3.vue';
import free13Style4 from './style13/style4.vue';
import free14Style1 from './style14/style1.vue';
import free14Style2 from './style14/style2.vue';
import free15Style1 from './style15/style1.vue';
import free15Style2 from './style15/style2.vue';
import free16Style1 from './style16/style1.vue';
import free16Style2 from './style16/style2.vue';
import free17Style1 from './style17/style1.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest } from '@/utils/getRemComputed';
import { ref, reactive, watch, computed, nextTick } from 'vue';
import { exbitMenuShow } from '@/hooks/menuHooks';
import { commonDataStore, useProjectStore } from '@/store';
import { getdraggableDisabled } from '@/utils/minxin';
import { useRoute } from 'vue-router';
import { publicUrls } from '@/utils/minxin';

const timer = ref();
const route = useRoute();
const commonStore = commonDataStore();
const emit = defineEmits(['emitShowcaseDraggableStyle', 'emitShowcaseDraggable']);
const store = useProjectStore();
const contextMenuTrigger = ref();
const parentLock = ref(true);
const props = defineProps({
  info: {
    type: Object,
  },
  selectInfo: {
    type: Object,
  },
  width: {
    type: Number,
  },
});

const dragging = (draggingInfo: any) => {
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    emit('emitShowcaseDraggable', draggingInfo); //传递当前展品图距离相对父元素的xy偏移量变化
  }, 10);
};
const resizing = (draggingInfo: any) => {
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    emit('emitShowcaseDraggableStyle', draggingInfo); //设置当前展品图距离相对父元素的宽高变化
  }, 10);
};
const resizeEnd = (draggingInfo: any) => {
  // emit('emitDraggable', props.indexs, draggingInfo);
  setTimeout(() => {
    emit('emitShowcaseDraggableStyle', draggingInfo); //设置当前展品图距离相对父元素的宽高变化
  }, 200);
};
const getShowcaseItem = computed(() => {
  switch (props.selectInfo.id) {
    case 17001:
      return style1;
      break;
    case 17002:
      return style2;
      break;
    case 17003:
      return style3;
      break;
    case 17004:
      return style4;
      break;
    case 17005:
      return style5;
      break;
    case 27001:
      return free2Style1;
      break;
    case 27002:
      return free2Style2;
      break;
    case 27003:
      return free2Style3;
      break;
    case 47001:
      return free4Style1;
      break;
    case 47002:
      return free4Style2;
      break;
    case 47003:
      return free4Style3;
      break;
    case 47004:
      return free4Style4;
      break;
    case 47005:
      return free4Style5;
      break;
    case 37001:
      return free3style1;
      break;
    case 37002:
      return free3style2;
      break;
    case 37003:
      return free3style3;
      break;
    case 37004:
      return free3style4;
      break;
    case 37005:
      return free3style5;
      break;
    case 37006:
      return free3style6;
      break;
    case 57001:
      return free5style1;
      break;
    case 57002:
      return free5style2;
      break;
    case 57003:
      return free5style3;
      break;
    case 57004:
      return free5style4;
      break;
    case 67001:
      return free6style1;
      break;
    case 67002:
      return free6style2;
      break;
    case 67003:
      return free6Style3;
      break;
    case 67004:
      return free6Style4;
      break;
    case 77001:
      return free7style1;
      break;
    case 77002:
      return free7style2;
      break;
    case 87001:
      return free8Style1;
      break; 
    case 87002: 
      return free8Style2;
      break;
    case 87003:
      return free8Style3;
      break;
      case 87004:
      return free8Style4;
      break;
    case 97001:
      return free9Style1;
      break;
    case 97002:
      return free9Style2;
      break;
    case 117001:
      return free11Style1;
      break;
    case 117002:
      return free11Style2;
      break;
    case 117003:
      return free11Style3;
    case 107001:
      return free10Style1;
      break;
    case 107002:
      return free10Style2;
      break;
    case 107003:
      return free10Style3;
      break;
    case 127001:
      return free12Style1;
      break;
    case 127002:
      return free12Style2;
      break;
    case 137001:
      return free13Style1;
      break;
    case 137002:
      return free13Style2;
      break;
    case 137003:
      return free13Style3;
      break;
    case 137004:
      return free13Style4;
      break;
    case 147001:
      return free14Style1;
      break;
    case 147002:
      return free14Style2;
      break;
    case 157001:
      return free15Style1;
      break;
    case 157002:
      return free15Style2;
      break;
    case 167001:
      return free16Style1;
      break;
    case 167002:
      return free16Style2;
      break;
    case 177001:
      return free17Style1;
      break;
    default:
      return style1;
      break;
  }
});
const preventDefaultDrag = (event) => {
  if (route.meta.loopType) {
  } else {
    event.stopPropagation();
  }
};
</script>

<style lang="less" scoped>
.exhibits-img {
  display: flex;
  position: relative;
  // -webkit-box-reflect: below -50% linear-gradient(transparent, rgba(0, 0, 0, 0.2));

  // img {
  //   width: 100%;
  //   height: 100%;
  //   object-fit: contain;
  // }
}
.active {
  z-index: 5 !important;
}
:deep(.vdr-container) {
  z-index: 4;
}
// .vdr-container:hover{
//   border: 2px solid #e62b17;
// }
:deep(.vdr-handle) {
  opacity: 0;
}
:deep(.handle-bm) {
  opacity: 1;
}
:deep(.handle-tm) {
  opacity: 1;
}
</style>
